<template>
  <div>
    <el-select v-model="internalSelectedPolicy" placeholder="请选择" :disabled="!isEditable" @change="changed">
      <el-option v-for="item in policies" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <!-- <select class="form-control" v-model="internalSelectedPolicy" @change="change">
        <option v-for="option in this.policies" v-bind:value="option.id" :key="option.id">{{ option.name }}</option>
      </select> -->
  </div>
</template>

<script>
  // import VueResource from 'vue-resource'
  export default {
    name: "Policy",
    props: ["selectedPolicy", "withUnlimit",'editable'],
    components: {
      // VueResource
    },
    data: function() {
      return {
        isEditable: false,
        internalSelectedPolicy: this.selectedPolicy,
        policies: []
      };
    },
    methods: {
      getpolicyname(id) {
        for (var index in this.policies) {
          if (this.policies[index].id == id) {
            return this.policies[index].name;
          }
        }
        return "";
      },
      loaddata: function() {
        if (this.withUnlimit) {
          this.policies = [{
            id: -1,
            name: "不限"
          }];
          this.policies = this.nationals.concat(this.sysconfigs.politicalStatus);
        } else this.policies = this.$store.state.sysconfigs.politicalStatus;
      },
      changed: function(value) {
        this.internalSelectedPolicy = value
        this.$emit("policychange", value);
      }
    },
    created: function() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      this.loaddata();
    }
  };
</script>
